<template>
  <md-nav-bar title="提现" />
  <view class="withdraw-page">
    <!-- 可提现金额 -->
    <view class="balance-section">
      <text class="balance-label">可提现金额（元）</text>
      <view class="balance-value">
        <text class="yuan">￥</text>
        <text class="amount">{{ formatUnitCentToYuan(data.balance, 2) }}</text>
      </view>
    </view>
    <!-- 输入提现金额 -->
    <view class="input-section">
      <view class="input-row">
        <text class="yuan">￥</text>
        <input
          class="amount-input"
          type="digit"
          v-model="data.withdrawAmount"
          placeholder="请输入提现金额"
        />
        <text class="all-btn" @click="withdrawAll">全部提现</text>
      </view>
    </view>

    <!-- 提现方式 -->
    <view class="desc">
      提现到微信零钱包
    </view>

    <!-- 确认提现按钮 -->
    <button class="submit-btn" @click="submitWithdraw">确认提现</button>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
// 接口
import api from '@/api';
import { Toast, formatUnitCentToYuan, formatUnitYuanToCent } from '@/utils/util';

const data = reactive({
  loading: false,
  balance: 0, // 可提现金额
  withdrawAmount: '', // 实际提现金额
  config: {} as Common.Configuration.Data
});
// 获取可提现金额
async function getBrokeragePrice() {
  data.loading = true;
  try {
    const res = await api.Pay.brokeragePrice({});
    data.balance = res.data?.brokeragePrice
  } catch (error) {}
  data.loading = false;
}

function withdrawAll() {
  data.withdrawAmount = formatUnitCentToYuan(data.balance,2)
}
// 提现逻辑
async function submitWithdraw() {
  let allowNum = formatUnitCentToYuan(data.config.withdrawMinPrice,2)
  if(Number(data.withdrawAmount) < Number(allowNum)) {
    Toast('最小提现金额为' + allowNum + '元');
    return false
  }
  if(Number(data.withdrawAmount) > Number(data.balance)) {
    Toast('可提现金额不足');
    return false
  }
  data.loading = true;
  try {
    const res = await api.Pay.createWithdrawal({
      price: formatUnitYuanToCent(data.withdrawAmount)
    });
    if(res.code === 0) {
      await Toast('提现成功');
      data.withdrawAmount = ''
      await uni.navigateBack()
    }else{
      await Toast('提现申请发生异常');
    }

  } catch (error) {}
  data.loading = false;
}

onLoad(() => {
  data.config = uni.getStorageSync('config');
  getBrokeragePrice();
});
</script>

<style lang="scss" scoped>
.withdraw-page {
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.nav-bar {
  height: 100rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #fff;
  padding-bottom: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx #eee;
}
.nav-title {
  font-size: 36rpx;
  font-weight: bold;
}
.balance-section {
  background: #fff;
  margin: 32rpx 0 0 0;
  padding: 40rpx 0 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.balance-label {
  color: #888;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.balance-value {
  display: flex;
  align-items: flex-end;
}
.yuan {
  font-size: 36rpx;
  color: #333;
  margin-right: 6rpx;
}
.amount {
  font-size: 64rpx;
  color: #333;
  font-weight: bold;
}
.input-section {
  background: #fff;
  margin-top: 20rpx;
  padding: 30rpx 0;
  border-top: 1rpx solid #f2f2f2;
  border-bottom: 1rpx solid #f2f2f2;
}
.input-row {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
}
.amount-input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 32rpx;
  border: none;
  outline: none;
  background: transparent;
}
.all-btn {
  color: #2196f3;
  font-size: 28rpx;
  margin-left: 16rpx;
}
.desc {
  text-align: center;
  color: #222;
  font-size: 30rpx;
  margin: 80rpx 0 0 0;
}
.submit-btn {
  width: 90%;
  margin: 80rpx auto 0 auto;
  background: #ff8855;
  color: #fff;
  font-size: 36rpx;
  border-radius: 40rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-weight: bold;
  border: none;
}
</style>
